<template>
  <div class="work-license">
    <div class="work-license-container">
      <div class="work-license-header">
        <!--logo-->
        <div class="work-license-logo"></div>
        <!--标题-->
        <div class="work-license-title">
          爱上呼吸 · 爱上家
        </div>
      </div>
      <!--个人展示-->
      <div class="work-license-person-profile">
        <div class="profile-left">
          <div class="profile-left-top">
            <div class='profile-left-name'>{{personData?.name}}</div>
            <div class="profile-position">{{personData?.postName}}</div>
            <div>10年甲醛治理施工经验</div>
            <div>每年服务近100个家庭</div>
          </div>
          <div class="profile-left-bottom">
            <div class="profile-honor">荣誉证书</div>
            <img :src="personData?.certificate" alt="">
          </div>
        </div>
        <div class="profile-right">
          <img :src="personData?.photo" alt="">
        </div>
      </div>
      <!--个人介绍-->
      <div class="work-license-person-intro">
        <div class="intro-block"></div>
        <div class="intro-con">
          <div class="intro-title">{{personData?.name}}工程师的个人介绍</div>
          <div class="intro-content">
            {{personData?.remarks}}
          </div>
        </div>
      </div>
      <!--温馨提示-->
      <div class="work-license-tips">
        温馨提示：丙程环保发布的工程师信息由劳动者本人提供，丙程环保平台对信息的真实性、及时性、正确性均不做任何形式保证，请不要相信过度承诺。
      </div>
      <!--丙程环保品牌介绍-->
      <div class="work-license-person-intro">
        <div class="intro-block"></div>
        <div class="intro-con">
          <div class="intro-title">丙程环保品牌介绍</div>
          <div class="intro-content brand-content">
            <span>
              丙程环保是一家致力于室内环境治理，集产品研发、销售、服务于一体的高科技环保公司。目前公司有多项自主研发的甲醛治理及去除其他有害物质的产品，以及数百项专利技术。我们的宗旨就是做空气的清洁工，让清新的空气充满每一个家庭。其主营业务范围覆盖：室内甲醛及有害物的检测、治理：空气污染长效化改善、净化，使用高科技产品和优质的服务，为更多家庭和企业，室内空气环境健康打下了牢固的基础。
            </span>
            <div class="brand-img">
              <div class="brand-img-top">
                <div class="brand-img-left">
                  <img src="@/assets/images/3.jpg" alt="">
                  <img src="@/assets/images/8.jpg" alt="">
                </div>
                <div class="brand-img-right">
                  <img src="@/assets/images/11.jpg" alt="">
                  <img src="@/assets/images/12.jpg" alt="">
                </div>
              </div>
              <div class="brand-img-bottom">
                <div class="brand-img-left">
                  <img src="@/assets/images/9.jpg" alt="">
                </div>
                <div class="brand-img-right">
                  <img src="@/assets/images/1.jpg" alt="">
                  <img src="@/assets/images/2.jpg" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--服务类别-->
      <div class="work-license-person-intro">
        <div class="intro-block"></div>
        <div class="intro-con">
          <div class="intro-title">每年帮助超100000+客户解决甲醛问题</div>
          <div class="intro-content service-type">
            <ul>
              <li>
                <div class="service-type-con">
                  <img src="@/assets/images/5.jpg" alt="">
                </div>
                <div class="service-type-block">
                  <span>别墅/高端公寓</span>
                </div>
              </li>
              <li>
                <div class="service-type-con">
                  <img src="@/assets/images/15.jpg" alt="">
                </div>
                <div class="service-type-block">
                  <span>跃层/复式/LOFT</span>
                </div>
              </li>
              <li>
                <div class="service-type-con">
                  <img src="@/assets/images/14.jpg" alt="">
                </div>
                <div class="service-type-block">
                  <span>高端家装三居室</span>
                </div>
              </li>
              <li>
                <div class="service-type-con">
                  <img src="@/assets/images/13.jpg" alt="">
                </div>
                <div class="service-type-block">
                  <span>普通家装二居室</span>
                </div>
              </li>
              <li>
                <div class="service-type-con">
                  <img src="@/assets/images/16.jpg" alt="">
                </div>
                <div class="service-type-block">
                  <span>新车五座/七座</span>
                </div>
              </li>
              <li>
                <div class="service-type-con">
                  <img src="@/assets/images/17.jpg" alt="">
                </div>
                <div class="service-type-block">
                  <span>工装</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--服务保障-->
      <div class="work-license-person-intro">
        <div class="intro-block"></div>
        <div class="intro-con">
          <div class="intro-title">全流程服务 保障您的权益</div>
          <div class="intro-content service-guarantee">
            <div class="service-guarantee-ul">
              <div class="service-guarantee-tip">
                <span>售前服务</span>
              </div>
              <div class="service-guarantee-li">
                <div class="service-guarantee-con">
                  <div class="service-guarantee-top">
                    <img src="@/assets/images/10.jpg" alt="">
                    <span>空气检测</span>
                  </div>
                  <div class="service-guarantee-bottom">
                    <span>根据检测数据</span>
                    <span>判断污染源头</span>
                  </div>
                </div>
              </div>
              <div class="service-guarantee-li">
                <div class="service-guarantee-con">
                  <div class="service-guarantee-top">
                    <img src="@/assets/images/4.jpg" alt="">
                    <span>定制方案</span>
                  </div>
                  <div class="service-guarantee-bottom">
                    <span>根据室内污染状况</span>
                    <span>定制专属施工方案</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="service-guarantee-ul">
              <div class="service-guarantee-tip">
                <span>专业除醛</span>
              </div>
              <div class="service-guarantee-li">
                <div class="service-guarantee-con">
                  <div class="service-guarantee-top">
                    <img src="@/assets/images/17.jpg" alt="">
                    <span>成品保护</span>
                  </div>
                  <div class="service-guarantee-bottom">
                    <span>避免沾染灰尘</span>
                    <span>让您省心、放心</span>
                  </div>
                </div>
              </div>
              <div class="service-guarantee-li">
                <div class="service-guarantee-con">
                  <div class="service-guarantee-top">
                    <img src="@/assets/images/14.jpg" alt="">
                    <span>施工治理</span>
                  </div>
                  <div class="service-guarantee-bottom">
                    <span>189项扎实的细节</span>
                    <span>确保治理效果</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="service-guarantee-ul">
              <div class="service-guarantee-tip">
                <span>售后保障</span>
              </div>
              <div class="service-guarantee-li">
                <div class="service-guarantee-con">
                  <div class="service-guarantee-top">
                    <img src="@/assets/images/7.jpg" alt="">
                    <span>合同保障</span>
                  </div>
                  <div class="service-guarantee-bottom">
                    <span>签订服务合同</span>
                    <span>保障您的权益</span>
                  </div>
                </div>
              </div>
              <div class="service-guarantee-li">
                <div class="service-guarantee-con">
                  <div class="service-guarantee-top">
                    <img src="@/assets/images/18.jpg" alt="">
                    <span>售后保障</span>
                  </div>
                  <div class="service-guarantee-bottom">
                    <span>及时售后服务</span>
                    <span>提供终身质保</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import './index.less'
import {getCurrentInstance, onMounted, ref, Ref} from 'vue'
import {useRoute} from 'vue-router'

interface PersonData {
  remark: string;
  engineerId: string;
  name: string;
  remarks: string;
  postName: string;
  certificate: string;
  photo: string;
}

  const { appContext } = getCurrentInstance()!;
  const api = appContext.config.globalProperties.$api;
  const personData: Ref<PersonData | null> = ref(null);
  const route = useRoute();
  const id = route.params.id;

  const getData = async () => {
    try {
      const { data } = await api.get(`/h5/detail/${id}`);
      if (data.code === 0) {
        personData.value = data.data;
      }
    } catch (error) {
      console.error('error', error)
    }
  }
  onMounted(async () => {
    await getData();
  })
</script>
